<template>
	<!-- <su-status-bar /> -->
	<view :style="{width:'100%',height:sheep.$platform.device.statusBarHeight + 'px',backgroundColor:'#000'}"></view>
	<view class="header-box ss-flex align-center"
		:style="{height: 44 + 'px',top:sheep.$platform.device.statusBarHeight + 'px'}">
		<uni-icons type="back" size="25" color="#fff" @click="back"></uni-icons>
	</view>
	<swiper class="swiper" @animationfinish="swiperChange" :current="state.current" vertical
		:style="{width:options.width + 'px',height:options.height + 'px'}" :circular="state.circular">
		<swiper-item v-for="(item,index) in state.list" :key="index">
			<view class="content" :style="{width:options.width + 'px',height:options.height + 'px'}">
				<template v-if="state.current === index">
					<ml-player :video="item" :videoOptions="options" @play="videoPlay" @pause="videoPause"
						@videoClick="videoClick" @doubleClick="doubleClick" @loadedmetadata="loadedmetadata"
						v-if="options.objectFit !== ''"></ml-player>
				</template>
				<!-- 	<image :style="{width:options.width + 'px',height:options.height + 'px'}"
					:src="sheep.$url.cdn(item.cover)" mode="aspectFill" v-else></image> -->
				<!-- 暂停按钮 -->
				<cover-image v-if="state.playing === false" @click="continuePlay" class="video-play"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qt/202409241140519302.png?x-oss-process=image/resize,w_200,h_200"></cover-image>
				<!-- 头像 -->
				<cover-view class="avatar ss-flex justify-center align-center">
					<cover-view class="ss-flex justify-center align-start" style="position: relative;height: 132rpx;">
						<cover-image class="avatar-image"
							:src="item.avatar ?  cdnUrl(item.avatar) : 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png?x-oss-process=image/resize,w_200,h_200'"
							mode="aspectFill" @click="jump(item)"></cover-image>
						<cover-image class="attention"
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/attention-not.png"
							@click="attention(1,index)"
							v-if="item.is_follow === 0 && userInfo.user_id !== item.user_id"></cover-image>
						<cover-image class="attention"
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/attention-yes.png"
							@click="attention(0,index)"
							v-if="item.is_follow === 1 && userInfo.user_id !== item.user_id"></cover-image>
					</cover-view>
				</cover-view>
				<!-- 右侧功能 -->
				<cover-view class="menus-box ss-flex flex-column">
					<cover-view class="menus-item ss-flex flex-column" @click.stop="setLike(item)">
						<cover-image
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/asvideos-icon-like-yes.png"
							v-if="item.is_likes === 1"></cover-image>
						<cover-image
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/asvideos-icon-1.png"
							v-if="item.is_likes === 0">
						</cover-image>
						<cover-view
							class="menus-item-text">{{item.likes === 0 ? '点赞' : formatCharCount(item.likes)}}</cover-view>
					</cover-view>
					<cover-view class="menus-item ss-flex flex-column ss-m-t-40" @click.stop="setComment(item)">
						<cover-image
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/asvideos-icon-2.png">
						</cover-image>
						<cover-view class="menus-item-text">
							{{item.collection_num === 0 ? '评论' : formatCharCount(item.collection_num)}}</cover-view>
					</cover-view>
					<cover-view class="menus-item ss-flex flex-column ss-m-t-40" @click.stop="setCollect(item,index)">
						<cover-image
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/asvideos-icon-collect-yes.png"
							v-if="item.is_collection === 1"></cover-image>
						<cover-image
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/asvideos-icon-3.png"
							v-if="item.is_collection === 0">
						</cover-image>
						<cover-view
							class="menus-item-text">{{item.collections === 0 ? '收藏' :  formatCharCount(item.collections)}}</cover-view>
					</cover-view>
					<cover-view class="menus-item ss-flex flex-column ss-m-t-40" @click.stop="setShare">
						<button open-type="share" class="ss-reset-button ss-flex flex-column">
							<cover-image
								src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/asvideos-icon-4.png">
							</cover-image>
							<cover-view class="menus-item-text">
								{{item.forward === 0 ? '分享' :  formatCharCount(item.forward)}}
							</cover-view>
						</button>
					</cover-view>
				</cover-view>
				<!-- 音乐转盘 -->
				<cover-image class="music" v-if="!options.muted"
					src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/asvideos-music.png"></cover-image>
				<cover-view class="video-info">
					<!-- 推荐的商品 -->
					<cover-view class="video-goods ss-flex align-center" @click="jumpGoods(item)"
						v-if="item.goods && item.goods.id">
						<cover-image class="video-goods-type"
							src="https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/mengchong/publish-icon-3.png"></cover-image>
						<cover-view class="video-goods-name">{{item.goods.title}}</cover-view>
					</cover-view>
					<!-- 用户昵称 -->
					<cover-view class="nickname" @click="jump(item)">@{{item.nickname}}</cover-view>
					<!-- 标题 -->
					<cover-view class="title">
						{{item.title}}
					</cover-view>
				</cover-view>
			</view>
		</swiper-item>
	</swiper>
</template>

<script setup>
	import sheep from '@/sheep';
	import API from '../api'
	import association from '@/association/store'
	import {
		onLoad,
		onShareAppMessage,
		onShareTimeline,
		onUnload
	} from '@dcloudio/uni-app';
	import {
		computed,
		reactive,
		ref
	} from 'vue';
	import {
		formatCharCount,
		cdnUrl
	} from '@/association/utils'

	const userInfo = computed(() => association().userInfo)

	const videoInfo = ref({}); // 视频信息配置项

	const options = ref({
		width: 0,
		height: 0,
		enableClick: true, // 开始视频单击事件，默认false
		enableDblClick: true, // 开始视频的双击事件，默认false
		autoplay: true, // 不自动播放，默认true
		fillHeight: true,
		controls: false,
		showRate: false,
		showFit: false,
		vslideGesture: false,
		muted: false,
		enableProgressGesture: false,
		objectFit: 'cover'
	})

	const state = reactive({
		videoContext: null,
		playing: true,
		list: [],
		originIndex: 0, // 记录源数据的下标
		circular: false, // 默认不能循环滚动  === 1 和 大于 列表数 都不能循环滚动
		id: '',
		current: 0,
		shareData: {},
		category_id: ''
	})

	onLoad((e) => {
		let system = uni.getSystemInfoSync()
		options.value.width = system.windowWidth
		options.value.height = system.windowHeight - system.statusBarHeight
		if (e) {
			state.id = e.id
			state.category_id = e.category_id
			getData()
		}

		// 评论动态加减
		uni.$on('commentSet', obj => {
			let index = state.list.findIndex(item => item.find_id === Number(obj.id))
			state.list[index].collection_num += 1
		})
	})

	onUnload(() => {
		uni.$off('commentSet')
	})

	onShareAppMessage((e) => {
		findForward();
		return {
			title: state.list[state.originIndex].title,
			path: `association/pages/asvideos?id=${state.list[state.originIndex].find_id}`,
			imageUrl: sheep.$url.cdn(state.list[state.originIndex].cover),
		};
	});
	onShareTimeline((e) => {
		findForward();
		return {
			title: state.list[state.originIndex].title,
			path: `/association/pages/asvideos?id=${state.list[state.originIndex].find_id}`,
			imageUrl: sheep.$url.cdn(state.list[state.originIndex].cover),
		};
	});

	// 跳转到商品详情
	const jumpGoods = (item) => {
		sheep.$router.go('/pages/goods/index', {
			id: item.goods.id
		})
	}

	const findForward = async (e) => {
		let res = await API.findForward({
			find_id: state.list[state.originIndex].find_id,
		});
		if (res.code) {
			state.list[state.originIndex].forward += 1
		}
	};

	const back = () => {
		uni.navigateBack({
			delta: 1
		});
	}

	// 个人中心
	const jump = (item) => {
		sheep.$router.go('/pages/user/userCenter/index?id=' + item.user_id);
	}

	// 关注
	const attention = async (type, index) => {
		state.list[index].is_follow = type
		let res = await API.info.operate({
			be_user_id: state.list[index].user_id
		})
		state.list[index].is_follow = res.data.is_care
	}

	// 控制音量
	const volume = (type) => {
		options.value.muted = type
	}

	// 获取视频列表
	const getData = async () => {
		const {
			code,
			data
		} = await API.getfindList({
			page: 1,
			file_type: 'video',
			set_begin: state.id,
			category_id: state.category_id
		})

		if (code === 1) {
			state.list = data.data.map(item => {
				return {
					// poster: sheep.$url.cdn(item.cover),
					url: item.image,
					...item
				}
			})
		}
	}

	const swiperChange = (event) => {
		const {
			current
		} = event.detail;
		state.current = current
		state.originIndex = current
	}

	const continuePlay = () => {
		if (state.playing) {
			state.videoContext?.pause();
		} else {
			state.videoContext?.play();
		}
	}

	const loadedmetadata = (context, info) => {
		const {
			width,
			height
		} = info.detail
		// options.value.objectFit = width > height ? 'contain' : 'cover'
	}

	/**
	 * 视频开始播放
	 * @param { UniApp.VideoContext } context 播放器上下文对象
	 */
	function videoPlay(context) {
		console.log('开始了----', context)
		state.videoContext = context;
		state.playing = true;
	}

	/**
	 * 视频暂停播放
	 * @param { UniApp.VideoContext } context 播放器上下文对象
	 */
	function videoPause(context) {
		state.videoContext = context;
		state.playing = false;
	}

	/**
	 * 点击了视频事件
	 * @param { UniApp.VideoContext } context 播放器上下文对象
	 * @param { Object } info 视频信息
	 */
	function videoClick(context, info) {
		console.log("视频信息：", info)
		state.videoContext = context;
		if (state.playing) {
			state.videoContext?.pause();
		} else {
			state.videoContext?.play();
		}
	}

	/**
	 * 视频双击事件
	 * @param { UniApp.VideoContext } _context 播放器上下文对象
	 * @param { Object } info 视频信息
	 */
	function doubleClick(_context, info) {
		setLike(info)
	}

	// 评论
	const setComment = (item) => {
		sheep.$router.go(`/association/pages/commentVideo?find_id=` + item.find_id);
	}

	// 收藏
	const setCollect = async (item, i) => {
		let res = await API.info.collection({
			find_id: item.find_id
		})
		if (res.code) {
			let index = state.list.findIndex(value => value.find_id === item.find_id)
			state.list[index].is_collection = res.data.is_collection
			if (res.data.is_collection) {
				state.list[index].collections += 1;
			} else {
				state.list[index].collections -= 1;
			}
		}
	}

	// 点赞
	const setLike = async (info) => {
		let res = await API.findLike({
			find_id: info.find_id,
		});
		if (res.code) {
			let index = state.list.findIndex(item => item.find_id === info.find_id)
			state.list[index].is_likes = res.data.is_like
			if (res.data.is_like) {
				state.list[index].likes += 1;
			} else {
				state.list[index].likes -= 1;
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import '@/association/scss/index.scss';

	view {
		box-sizing: border-box;
	}

	cover-view {
		box-sizing: border-box;
	}



	.content {
		background-color: #000;
		overflow: hidden;
		position: relative;
	}

	.avatar {
		height: 132rpx;
		position: absolute;
		right: 20rpx;
		bottom: 856rpx;
		z-index: 999;

		.avatar-image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			border: 4rpx solid #fff;
		}

		.attention {
			width: 40rpx;
			height: 40rpx;
			position: absolute;
			left: 35rpx;
			bottom: 8rpx;
		}
	}

	.menus-box {
		width: 100rpx;
		position: absolute;
		right: 20rpx;
		bottom: 270rpx;
		z-index: 999;

		.menus-item {
			width: 80rpx;

			image {
				width: 80rpx;
				height: 80rpx;
			}

			.menus-item-text {
				width: 80rpx;
				text-align: center;
				font-size: 24rpx;
				font-weight: normal;
				color: #FFFFFF;
			}
		}
	}

	.music {
		width: 96rpx;
		height: 96rpx;
		position: absolute;
		right: 20rpx;
		bottom: 125rpx;
		z-index: 99;
	}

	.video-info {
		width: 500rpx;
		position: absolute;
		left: 32rpx;
		bottom: 125rpx;
		z-index: 999;

		.video-goods {
			width: 562rpx;
			height: 60rpx;
			background: rgba(232, 232, 232, 0.5);
			margin-bottom: 40rpx;
			padding: 0 20rpx;

			.video-goods-type {
				width: 40rpx;
				height: 40rpx;
				margin-right: 15rpx;
			}

			.video-goods-name {
				width: 400rpx;
				font-size: 28rpx;
				font-weight: normal;
				color: #FFFFFF;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		}

		.nickname {
			width: max-content;
			font-size: 32rpx;
			font-weight: 600;
			color: #FFFFFF;
			margin-bottom: 60rpx;
		}

		.title {
			font-size: 28rpx;
			font-weight: normal;
			color: #FFFFFF;
			white-space: normal;
			word-break: break-all;
			display: -webkit-box;
			overflow: hidden;
			text-overflow: ellipsis;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2; //行数
		}
	}


	.header-box {
		width: 100%;
		background-color: transparent;
		position: fixed;
		left: 0;
		z-index: 9999;
		padding: 0 30rpx;
	}

	.video-play {
		width: 150rpx;
		height: 150rpx;
		position: absolute;
		left: 300rpx;
		bottom: 700rpx;
	}
</style>